<template>
  <li @click="toggleStatus(id)">
    <label>
      <input type="radio" :checked="isCompleted" />
      <span>{{title}}</span>
    </label>
    <!-- 必须要阻止冒泡，不然事件会冒泡到li标签上 -->
    <b class="del" @click.stop="handleDel(id)">❌</b>
  </li>
</template>

<script>
export default {
  props: {
    id: {
      type: Number
    },
    title: {
      type: String
    },
    isCompleted: {
      type: Boolean
    }
  },
  methods: {
    toggleStatus (id) {
      // 点击li标签要切换状态，就需要告诉父组件我要切换哪一个任务
      this.$store.commit('updateStatus', id)
    },
    handleDel (id) {
      // 点击删除，告诉父组件我要删哪个
      this.$store.commit('del', id)
    }
  }
}
</script>

<style>
</style>
